<template>
  <header>
    <ul class="Music_header">
            <li>
                <p @click="back">
                   <svg-icon icon-class="arrow-left" style="height: 24px;width: 24px;"></svg-icon>
                </p>
                <p>
                   <svg-icon icon-class="arrow-right" style="height: 24px;width: 24px;"></svg-icon>
                </p>
            </li>
            <li>
                <router-link
                tag="p"
                 v-for="item in ($router.options.routes.filter(item => item.title))"
                :key="item.title"
                :to={name:item.name}
                :class="{'active':$route.name === item.name}"
                @click.native="toggleMusicLibrary"
                >
                {{$t(`nav.${item.name}`)}}
                </router-link>
            </li>
            <li>
                <svg-icon icon-class="search" style="height: 15px;width: 15px;color: var(--color-text);opacity: .28;margin-left: 8px;margin-right: 4px;transform:translateX(25px);"></svg-icon>
                <input type="text" :placeholder="$t('nav.search')">
                <img src="../../views/Home/components/RowItem/default_avatar.jpg" alt="" v-if="!userAvatar">
                <img :src="userAvatar" alt="">
                <span class="loginIn"  @click="toggle($event)">
                </span>
                <ul class="menu" :style="`top:${topVal}px;left:${leftVal}px;`" ref="showMenu" v-show="flag">
                    <li>
                        <svg-icon icon-class="settings" class="login" style="height:16px;width:16px;"></svg-icon>
                        <span>{{$t('settings.settings')}}</span>
                        <setting>
                          <div class="settings">
                            <div class="container">
                              <div class="item">
                                <div class="left">
                                  <div class="title"> {{$t('settings.language')}} </div>
                                </div>
                                <div class="right">
                                  <select  @click="toggle1" @change="changeLanguage($event)"  :class="[colorStyle]">
                                    <option value="en">English</option>
                                    <option value="zh">简体中文</option>
                                  </select>
                                </div>
                              </div>
                              <div class="item">
                                <div class="left">
                                  <div class="title"> {{$t('settings.appearance.text')}} </div>
                                </div>
                                <div class="right">
                                  <select @click="toggle2"  :class="[colorStyle]">
                                    <option value="auto">{{$t('settings.appearance.auto')}}</option>
                                    <option value="light">{{$t('settings.appearance.light')}}</option>
                                    <option value="dark">{{$t('settings.appearance.dark')}}</option>
                                  </select>
                                </div>
                              </div>
                              <h3 style="text-align: left;">音质</h3>
                              <div class="item">
                                <div class="left">
                                  <div class="title"> {{$t('settings.musicQuality.text')}} </div>
                                </div>
                                <div class="right">
                                  <select  @click="toggle3"  :class="[colorStyle]">
                                    <option value="128000"> {{$t('settings.musicQuality.low')}} - 128Kbps </option>
                                    <option value="192000">  {{$t('settings.musicQuality.medium')}} - 192Kbps </option>
                                    <option value="320000">  {{$t('settings.musicQuality.high')}}  - 320Kbps </option>
                                    <option value="999000"> {{$t('settings.musicQuality.lossless')}}  - FLAC </option>
                                  </select>
                                </div>
                              </div>
                              <h3 style="text-align: left;">第三方</h3>
                              <div class="item">
                                <div class="left">
                                  <div class="title"> 连接 Last.fm </div>
                                </div>
                                <div   class="right">
                                  <button  > 授权连接 </button>
                                </div>
                              </div>
                              <div   class="item">
                                <div   class="left">
                                  <div   class="title">启用
                                    <a   href="https://github.com/nondanee/UnblockNeteaseMusic" target="blank">UnblockNeteaseMusic</a>
                                  </div>
                                </div>
                                <div   class="right">
                                  <div   class="toggle">
                                    <input   id="enable-unblock-netease-music" type="checkbox" name="enable-unblock-netease-music">
                                    <label   for="enable-unblock-netease-music"></label>
                                  </div>
                                </div>
                              </div>
                              <div   class="item">
                                <div   class="left">
                                  <div   class="title"> {{$t('settings.showLibraryDefault')}}</div>
                                </div>
                                <div   class="right">
                                  <div   class="toggle">
                                    <input   id="show-library-default" type="checkbox" name="show-library-default">
                                    <label   for="show-library-default"></label>
                                  </div>
                                </div>
                              </div>
                              <div   class="item">
                                <div   class="left">
                                  <div   class="title"> {{$t('settings.showPlaylistsByAppleMusic')}}</div>
                                  </div>
                                  <div   class="right">
                                    <div   class="toggle">
                                      <input   id="show-playlists-by-apple-music" type="checkbox" name="show-playlists-by-apple-music">
                                      <label   for="show-playlists-by-apple-music"></label>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </setting>
                    </li>
                    <li @click="$router.push({name:'login'})" v-if="!userAvatar">
                        <svg-icon icon-class="login" class="login" style="height:16px;width:16px;"></svg-icon>
                        <span>{{$t('login.login')}}</span>
                    </li>
                    <li @click="userloginOut" v-if="userAvatar">
                        <svg-icon icon-class="logout" class="login" style="height:16px;width:16px;"></svg-icon>
                        <span>{{$t('settings.logout')}}</span>
                    </li>
                </ul>
            </li>
    </ul>
  </header>
</template>

<script>
// eslint-disable-next-line import/no-extraneous-dependencies
import store from 'storejs';
import setting from '../../components/Setting/Setting';
import { mapState, mapMutations } from '../../store/index';
// import i18n from '../../lang/index';

export default {
  components: { setting },
  name: 'MusicHeader',
  data() {
    return {
      headerList: ['首页', '发现', '音乐库'],
      leftVal: -115,
      topVal: 30,
      flag: false,
      color1: 'black',
      color2: 'black',
      color3: 'black',
      colorStyle: '',
    };
  },
  computed: {
    ...mapState(['userAvatar']),
  },
  created() {
    document.addEventListener('click', (e) => {
      if (this.$refs.showMenu) {
        const isSHow = this.$refs.showMenu.contains(e.target);
        if (isSHow) {
          this.flag = false;
        }
      }
    });
    if (store.get('user')) {
      this.changeUserAvatar(store.get('user').profile.avatarUrl);
      // this.userAvatar = store.get('user').profile.avatarUrl;
    }
  },
  methods: {
    ...mapMutations(['changeUserAvatar']),
    toggleMusicLibrary() {
    },
    toggle(e) {
      // 右键菜单事件
      // 处理兼容性问题
      const oEvent = e || event;
      // 设置自定义菜单为可见
      this.flag = true;
      // // 获取鼠标的坐标
      const moveX = oEvent.clientX;
      const moveY = oEvent.clientY;
      // // 设置盒子的top和left值
      this.leftVal = moveX - 880;
      this.topVal = moveY;
    },
    closeTextMenu() {
      this.flag = false;
    },
    back() {
      this.$router.go(-1);
    },
    userloginOut() {
      // eslint-disable-next-line no-alert
      if (confirm('确定要退出登录吗？')) {
        this.loginOut();
      }
    },
    loginOut() {
      // eslint-disable-next-line no-console
      this.$loginOut({
        cookie: store.get('user').cookie,
      }).then((res) => {
        // eslint-disable-next-line no-console
        if (res.data.code === 200) {
          store.clear();
          this.changeUserAvatar('');
          this.$router.push({ name: 'home' });
        }
      }).catch((err) => {
        // eslint-disable-next-line no-console
        console.log(err);
      });
    },
    toggle1() {
      this.color1 = '#335eea';
    },
    toggle2() {
      this.color2 = '#335eea';
    },
    toggle3() {
      this.color3 = '#335eea';
    },
    changeLanguage(e) {
      this.$i18n.locale = e.target.value;
    },
  },
};
</script>

<style lang="scss" scoped>
.Music_header {
     width: 1212px;
    height: 64px;
    display: flex;
    li {
        display: flex;
        font-size: 19px;
        align-items: center;
        font-weight: bold;
        input {
            padding-left: 30px;
            font-size: 16px;
            font-weight: bold;
            width: 202px;
            height: 34px;
            border: none;
            outline: none;
            border-radius: 8px;
            background-color: #f2f2f2;
        }
        p {
            height: inherit!important;
            i::before {
                font-size: 19px;
            }
        }
        &:nth-of-type(1) {
            margin-right: 46px;
            display: flex;
            align-items: center;
            width: 457px;
            p {
                i::before {
                    font-weight: bold;
                    font-size: 16px;
                }
                &:nth-of-type(2) {
                    padding-left: 24px;
                }
            }
        }
        &:nth-of-type(2) {
            cursor: pointer;
            width: 214px;
            justify-content: space-between;
            p {
                &.active {
                    color: #375cff;
                }
            }
        }
        &:nth-of-type(3) {
            position: relative;
            width: 496px;
            justify-content: flex-end;
            i {
                position: absolute;
                right: 180px;
                &::before {
                    color: #ababab;
                }
            }
        }
    }
}
header{
    // width: 1212px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content:center;
    align-items: center;
    height: 64px;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: var(--color-navbar-bg);
    z-index: 100;
    -webkit-app-region: drag;
}
#app, input {
    font-family: Barlow,-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
}
.svg-icon{
    height: 24px;
    width: 24px;
}
.svg-icon{
    color: var(--color-text);
}
.svg-icon{
    fill: currentColor;
}
img{
    user-select: none;
    height: 30px;
    margin-left: 12px;
    vertical-align: -7px;
    border-radius: 50%;
    cursor: pointer;
    -webkit-app-region: no-drag;
    -webkit-user-drag: none;
}
.menu{
    // display: none;
    position: absolute;
    padding:10px 5px 5px 5px;
    top:25px;
    right: -110px;
    background: white;
    width:135px;
    box-shadow:0px 0px 10px -5px grey;
    height: 90px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 8px;
    -webkit-app-region: no-drag;
    li{
        padding-left: 20px;
        display: flex;
        align-items: center;
        height:38px;
        border-radius: 8px;
        width:125px!important;
        span{
            font-size:15px;
        }
        &:nth-of-type(1){
            span{
                margin-left: 4px;
            }
        }
        &:nth-of-type(2){
            span{
                transform: translateX(-54px);
            }
        }
        &:hover{
            background:#eaeffd;
            color:#335eea;
            .login{
                color:#335eea;
            }
        }
    }
}
.loginIn{
    position: absolute;
    width: 30px!important;
    height: 30px;
    right: 11px;
    border-radius: 50%;
    display: none;
    background:rgba(0,0,0,.2);
}
img:hover~.loginIn{
    display: block;
}
p{
    margin:0px !important;
}
ol, ul, dl {
    margin:0px !important;;
}
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.settings{
    display: flex;
    justify-content: center;
}
.container{
    margin-top: 24px;
    width: 720px;
}
.item{
    margin: 24px 0;
    display: flex;
    width:704px;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text);
}
.item .title{
    font-size: 16px;
    font-weight: 500;
    opacity: .78;
}
select{
    outline: none;
    min-width: 192px;
    font-weight: 600;
    border: none;
    padding: 8px 12px 8px 12px;
    border-radius: 8px;
    color: var(--color-text);
    background: var(--color-secondary-bg);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    option{
       color:#335eea;
       background: #eaeffd;
    }
}
.colorStyle{
  color:#335eea;
  background: #eaeffd;
}
button{
    color: var(--color-text);
    background: var(--color-secondary-bg);
    padding: 8px 12px 8px 12px;
    font-weight: 600;
    border-radius: 8px;
    transition: .2s;
    border: none;
    cursor: pointer
}
button, select {
    font-family: inherit;
}
.toggle{
    margin: auto;
}
.toggle input{
    opacity: 0;
    position: absolute;
}
.toggle input+label{
    position: relative;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: .4s ease;
    height: 32px;
    width: 52px;
    background: var(--color-secondary-bg);
    border-radius: 8px;
}
.toggle input:checked+label:before {
    background: var(--color-primary);
    transition: width .2s cubic-bezier(0,0,0,.1);
}
.toggle input+label:before {
    content: "";
    position: absolute;
    display: block;
    transition: .2s cubic-bezier(.24,0,.5,1);
    height: 32px;
    width: 52px;
    top: 0;
    left: 0;
    border-radius: 8px;
}
.toggle input:checked+label:after {
    left: 26px;
}
.toggle input+label:after {
    content: "";
    position: absolute;
    display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0,.2),
     0 4px 0 0 rgba(0, 0, 0, .1),
     0 4px 9px rgba(0, 0, 0 ,.8),
     0 3px 3px rgba(0 ,0 ,0 , .3);
    transition: .35s cubic-bezier(.54,1.6,.5,1);
    background: #fff;
    height: 20px;
    width: 20px;
    top: 6px;
    left: 6px;
    border-radius: 6px;
}
/deep/.ant-drawer-title{
    text-align: center;
  }
  h3{
    margin-top: 48px;
    padding-bottom: 12px;
    font-size: 26px;
    color: var(--color-text);
    border-bottom: 1px solid hsla(0,0%,50.2%,.18);
}
/deep/.container{
    margin-top: -30px;
    width: 720px;
}
/deep/ .ant-drawer-content{
  height:760px;
}
/deep/.ant-drawer-header{
  text-align: center;
}
</style>
